<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Bell } from "@element-plus/icons-vue";
import Cookies from "js-cookie";

// 响应式变量

const cookieName = "OnMsg";

// 事件
// 组件加载成功事件
onMounted(() => {
  // 获取cookie
  const myCookie = Cookies.get(cookieName) as string | undefined;
  if (myCookie === undefined) {
    initOnMsgCookie(cookieName);
    // 弹出提醒。
    outMessage();
  }
});

function initOnMsgCookie(cookieName: string) {
  const expirationDate = new Date();
  const hours = 4;
  expirationDate.setHours(expirationDate.getHours() + hours);
  // const seconds = 10;
  // expirationDate.setSeconds(expirationDate.getSeconds() + seconds);
  Cookies.set(cookieName, cookieName, { expires: expirationDate });
}

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
const outMessage = async () => {
  await sleep(2000);
  ElMessage({
    showClose: true,
    message: "页面Bug有劳反馈宋居易！！",
    type: "success",
    icon: Bell,
    duration: 20000,
  });
  await sleep(3000);
  ElMessage({
    showClose: true,
    message: "欢迎页面改善的建议！！",
    type: "success",
    icon: Bell,
    duration: 20000,
  });
};

// console.log(currentWin)
</script>

<template>
  <Particle />
  <div class="App_Screen">
    <el-container class="App_layout1">
      <el-aside class="App_child App_grid-aside">
        <el-container>
          <el-main>
            <el-header class="App_head1"><LeftTop /></el-header>
            <el-header class="App_head2" />
            <el-header class="App_footer"><LeftBottom /></el-header>
          </el-main>
        </el-container>
      </el-aside>

      <el-aside class="App_child App_col-interval" />

      <el-container class="App_child App_grid-main-layout">
        <el-main class="App_main-container">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.App_Screen {
  display: flex;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.App_layout1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  /*background-color: #fd6900; #ffffff transparent*/
}

/* 宽 */

.App_child {
  display: flex;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.App_grid-aside {
  width: 26%;
}
.App_col-interval {
  width: 2%;
}

.App_grid-main-layout {
  width: 72%;
}

/* 高 */

.App_head1 {
  width: 100%;
  height: 29%;
  /*--el-header-padding: 0 0;*/
}

.App_head2 {
  width: 100%;
  height: 5%;
  background-color: transparent;
}

.App_footer {
  width: 100%;
  height: 66%;
}
</style>
